/**
 * Created by xlt on 2017/5/10.
 */
import React, {PropTypes} from "react";
import {connect} from "react-redux";
import {fetchPosts, reset} from "../../actions";
import {Link} from "react-router";
import cookie from "react-cookie";
import Events from "../../utils/Events";
import isEqual from "lodash/isEqual";
import OrderData from "../../components/OrderData";

class myOrderPay extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading:true,
            pageindex:1,
            isLoading:true,
            listItems:[],
            currOrderId:0
        }
    }
    componentWillMount() {
        document.title="待付款";
    }
    componentDidMount() {
        const header= {"X-Client-ID":"123456","X-Long-Token":cookie.load("token")};
        this.props.dispatch(reset("getOrderList"));
        this.props.dispatch(fetchPosts("getOrderList", header, {"pageindex":this.state.pageindex,"pagesize":10,"orderStatus": 0}));
        this._scrollListener = Events.on(window, 'scroll', this.checkButtom.bind(this))
    }
    componentWillUnmount() {

    }
    addList(lists){
        this.setState({isLoading:lists.length == 10 ? true:false});
        if(this.state.pageindex == 1){
            this.setState({listItems:lists});
        }else{
            this.setState({listItems:this.state.listItems.concat(lists)});
        }
    }
    checkButtom(){
        const header= {"X-Client-ID":"123456","X-Long-Token":cookie.load("token")};
        let scrollTop = document.body.scrollTop,
            innerHeight = window.innerHeight,
            scrollHeight = document.body.scrollHeight,
            pageindex = this.state.pageindex

        if(scrollTop + innerHeight >= scrollHeight && this.state.isLoading ){
            pageindex++;
            this.setState({pageindex:pageindex});
            this.props.dispatch(reset("getOrderList"));
            this.props.dispatch(fetchPosts("getOrderList", header,
                {
                    pageindex:pageindex,
                    pagesize:10,
                    orderStatus: 0
                })
            )
        }
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.orderPayList.errorCode == 0){
            this.setState({
                loading:false
            })
        }
        if(nextProps.orderPayList.errorCode == 0 && !isEqual(nextProps.orderPayList, this.props.orderPayList)  ){
            if(nextProps.orderPayList.data.orderMainVos.length >0){
                this.addList(nextProps.orderPayList.data.orderMainVos);
            }
        }

        if(nextProps.CancelOrder.errorCode == 0){
            console.log("msg:" + nextProps.CancelOrder.errorMessage);
            this.updateOrderStatusToCanceled();
        }
    }

    updateOrderStatusToCanceled() {
        this.state.listItems.map((item)=>{
            if(item.orderId == this.state.currOrderId) {
                item.orderStatus = -100;
                item.orderStatusDesc = '取消订单';
            }
        })
    }

    cancelOrder(orderId){
        this.setState({currOrderId: orderId});
        console.log("cancelOrder" + orderId);
        const header= {"X-Client-ID":"123456","X-Long-Token":cookie.load("token")};
        this.props.dispatch(fetchPosts("cancelOrder", header, {"orderId":orderId}));
    }

    render() {
        if(this.state.loading){
            return(<div className="loading"><span>loading</span></div>)
        }else{
            return(
                <div >
                    <div className="mall-bar">
                        <Link to="mall/myOrder">全部</Link>
                        <Link to="mall/myOrderPay"className="curr">待付款</Link>
                        <Link to="mall/myOrderSend">待发货</Link>
                        <Link to="mall/myOrderReceipt">待收货</Link>
                        {/*<Link to="mall/myOrderEvaluate">待评价</Link>*/}
                    </div>
                    <div className="order-list-display">
                        <ul>
                            {this.state.listItems.map((item, index)=>{
                                    return(
                                        <OrderData item={item} key={index} cancelOrder={this.cancelOrder.bind(this)}/>
                                    )
                                }
                            )}
                        </ul>
                    </div>
                </div>
            )
        }
    }
}

myOrderPay.propTypes = {
    isFetching: PropTypes.bool.isRequired,
    dispatch: PropTypes.func.isRequired
}
myOrderPay.contextTypes = {
    router:React.PropTypes.object
}

function mapStateToProps(state){
    const { postsByApi } = state;
    const {
        isFetching,
        items: orderPayList
    } = postsByApi["getOrderList"] || {
        isFetching: false,
        items: {}
    }
    const {
        items: CancelOrder
    } = postsByApi["cancelOrder"] || {
        items: {}
    }
    return {
        CancelOrder,
        orderPayList,
        isFetching
    }
}
export default connect(mapStateToProps)(myOrderPay);

